<template>
    <div>
        <div ref="refChart" style="width: 100%;height:15.25rem;"></div>
    </div>
</template>
  
<script setup lang="ts">
// import { ref, onMounted } from 'vue';
// import * as echarts from 'echarts';
import { RequestStatisticGetFAPByDate } from "@/api/path/index.js";
//
// // 基于准备好的dom，初始化echarts实例
// // 绘制图表
// onMounted(() => {
//     RequestStatisticGetFAPByDate().then((res: any) => {
//         var chartDom = document.getElementById('mainP6');
//         var myChart = echarts.init(chartDom);
//         var option;
//         option = {
//             grid: {
//                 left: '3%',
//                 right: '3%',
//                 bottom: '6%',
//                 top: '24%',
//                 containLabel: true,
//             },
//             tooltip: {
//                 trigger: 'axis',
//                 axisPointer: {
//                     type: 'cross',
//                     crossStyle: {
//                         color: '#999'
//                     }
//                 }
//             },
//             legend: {
//                 data: ['出库', '入库'],
//                 top: '14%',
//                 right: '2%',
//                 itemWidth: 10,
//                 itemHeight: 10,
//                 borderRadius: 4
//
//             },
//             xAxis: [
//                 {
//                     type: 'category',
//                     data: res.resultObj.日期,
//                     axisPointer: {
//                         type: 'shadow'
//                     }
//                 }
//             ],
//             yAxis: [{}],
//             series: [
//                 {
//                     name: '出库',
//                     type: 'line',
//                     data: res.resultObj.溯源件出库,
//                     itemStyle: {
//                         color: '#165DFF'
//                     }
//                 },
//                 {
//                     name: '入库',
//                     type: 'line',
//                     data: res.resultObj.溯源件入库,
//                     itemStyle: {
//                         color: '#13C3D1'
//                     }
//                 }
//             ]
//         };
//         option && myChart.setOption(option);
//     })
// })
import {onUnmounted, onMounted, ref,markRaw } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const refChart = ref();
const chartInstance = ref();
const chartData = ref();

// 获取接口数据
const getData = () => {
  return new Promise((resolve, reject) => {
    RequestStatisticGetFAPByDate()
      .then((res: any) => {
        chartData.value = res.resultObj;
        resolve(res.resultObj);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
onMounted(async () => {
  await getData();
  // 图表初始化
  initChart();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener('resize', screenAdapter);
});

const initChart = () => {
  chartInstance.value =markRaw(echarts.init(refChart.value))
  const initOption: EChartsOption = {
    grid: {
      left: '3%',
      right: '3%',
      bottom: '6%',
      top: '24%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['出库', '入库'],
      top: '14%',
      right: '2%',
      itemWidth: 10,
      itemHeight: 10,
      borderRadius: 4

    },
    xAxis: [
      {
        type: 'category',
        data:chartData.value['日期'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [{}],
    series: [
      {
        name: '出库',
        type: 'line',
        data:chartData.value['溯源件出库'],
        itemStyle: {
          color: '#165DFF'
        }
      },
      {
        name: '入库',
        type: 'line',
        data: chartData.value['溯源件入库'],
        itemStyle: {
          color: '#13C3D1'
        }
      }
    ]
  };
  // 图表初始化配置
  chartInstance.value?.setOption(initOption);
};
const screenAdapter = () => {
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize({width:'auto', animation: { duration: 300 } });
};
onUnmounted(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener('resize', screenAdapter);
});
</script>
<style lang="scss" scoped></style>